<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>js地图-leaflet</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
  <style type="text/css">
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .m-map {
      width: 100%;
      height: 100%;
    }

    .leaflet-control {
      display: none;
    }

    .leaflet-right {
      direction: none;
    }
  </style>
</head>

<body>
  <div id="map" class="m-map"></div>

  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
  <!-- <script src="./js/migrationLayer-old.js"></script> -->
  <script src="./js/migrationLayer.js"></script>

  <script type="text/javascript">
    var map = L.map('map').setView([51.505, -0.09], 1);;
    var positron = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    }).addTo(map);

    L.marker([51.5, -0.09]).addTo(map)
      .bindPopup('这里是伦敦')
      .openPopup();

    var data = [
      {
        "from": [-0.09, 51.505],
        "to": [116.3, 39.9],
        "labels": ["伦敦", "北京"],
        "color": "#ff3a31"
      },
    ];

    var data2 = [
      {
        "from": [-118.2705, 33.9984],
        "to": [-122.789336, 37.920458],
        "labels": ["Los Angeles", "San Francisco"],
        "color": "#ff3a31"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-80.247887, 25.792296],
        "labels": [null, "Miami"],
        "color": "#ff7e2b"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-73.999705, 40.795047],
        "labels": [null, "New York"],
        "color": "#ffc726"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-87.724088, 41.917846],
        "labels": [null, "Chicago"],
        "color": "#e9ff20"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-92.145189, 46.77372],
        "labels": [null, "Duluth"],
        "color": "#99ff1b"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-111.824547, 40.788055],
        "labels": [null, "Salt Lake"],
        "color": "#45ff15"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-111.364615, 47.536109],
        "labels": [null, "Great Falls"],
        "color": "#10ff33"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-97.585039, 35.511099],
        "labels": [null, "Oklahoma"],
        "color": "#0aff84"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-115.157907, 36.173032],
        "labels": [null, "Las Vegas"],
        "color": "#05ffd9"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-103.196215, 34.418753],
        "labels": [null, "Clovis"],
        "color": "#00ccff"
      }
    ];


    // migrationLayer-old 示例配置
    // var migrationLayer = new L.migrationLayer(
    //   {
    //     map: map,
    //     // data: data,
    //     data: [...data, ...data2],
    //     pulseRadius: 30,  // 闪烁圆圈半径
    //     pulseBorderWidth: 3,  // 闪烁圆圈的边框宽度
    //     arcWidth: 1,  // 弧线宽度
    //     arcLabel: true, // 是否展示label
    //     arcLabelFont: '10px sans-serif',
    //     maxWidth: 5,
    //   }
    // );

    // migrationLayer 示例配置
    var migrationLayer = new L.migrationLayer(
      {
        map: map,
        // data: data,
        data: [...data, ...data2],
        pulseRadius: 30,
        pulseBorderWidth: 3,
        starWidth: 4, // 流星宽度
        arcWidth: 1,  // 弧线宽度
        arcLabel: true, // 是否展示label
        arcAlpha: 0.5,  // 弧线透明度
        arcStrokeColor: '#007acc',  // 弧线颜色
        arcLabelFont: '10px sans-serif',
      }
    );

    migrationLayer.addTo(map);
    migrationLayer.on('click', (data) => {
      console.log("当前点击的弧线是", data);
    });
  </script>
</body>

</html>